<template>
  <el-tooltip
    :disabled="tooltipDisabled(form[item.key], item.tooltipLength)"
    :content="form[item.key]"
    placement="top"
  >
    <el-input
      ref="formInputRef"
      v-model="form[item.key]"
      :placeholder="placeholder"
      :style="style"
      :disabled="itemDisabled"
      :rows="item.row"
      :type="item.inputType"
      @change="stakeMarkChange(item.key)"
    />
  </el-tooltip>
</template>

<script lang="ts">
import usePlacehoder from '@/hooks/usePlacehoder'
import { fnFormatting } from '@/utils/formatting.js'
import { isEmpty } from 'lodash'
import { defineComponent, PropType, ref } from 'vue'
import useDisabled from '../hooks/useDisabled'
import { FormItem } from '../types'

export default defineComponent({
  emits: {
    'update:form': null,
  },
  props: {
    item: {
      type: Object as PropType<FormItem>,
      required: true,
    },
    form: {
      type: Object as PropType<Record<string, string>>,
      required: true,
    },
    placeholderId: {
      type: String,
      default: () => '',
    },
    disabled: {
      type: Boolean,
      required: true,
    },
  },
  setup(props) {
    const placeholder = usePlacehoder(props.item, 'lang.placeholder.input')
    const itemDisabled = useDisabled(props.disabled, props.item.disabled)
    const formInputRef = ref(null)

    const stakeMarkChange = (key) => {
      if (key == 'endStake' || key == 'startStake' || key == 'centerStake') {
        props.form[key] = fnFormatting(props.form[key])
      }
    }

    const tooltipDisabled = (content: string, tooltipLength: number) => {
      if (!tooltipLength) {
        return true
      }

      return !(content && content.replace(/[\u4e00-\u9fa5]/gm, 'aa').length >= tooltipLength)
    }
    return {
      style: {
        width: props.item?.width ? props.item.width + 'px' : '100%',
      },
      itemDisabled,
      placeholder,
      stakeMarkChange,
      isEmpty,
      tooltipDisabled,
      formInputRef,
    }
  },
})
</script>
